<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{ 
				background-color:yellow;
				}
			p
{
background-color:blue;
}

a[target]
{
background-color:red;
}
a:visited
{
background-color:yellow;
}
p:lang(en)
{ 
background:yellow;
}::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}

:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
:root
{
background:#ff0000;
}
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}
		</style>
	</head>
	<body>
		<h1>欢迎来到我到的主页</h1>

<div class="intro">
<p id="firstname">我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<p>带有 target 属性的链接会得到red背景：</p>

<a href="http://www.w3school.com.cn">w3school.com.cn</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>


<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>

<br>

<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<form action="">
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
</form>
	</body>
</html>
